<template>
	<view class="">
		<!-- 头部轮播 -->
		<view class="carousel-section" v-if="swiperLength > 0">
			<!-- 背景色区域 -->

			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" :data-url="item" class="carousel-item" @click="ViewImage">
					<image :src=" item + '?imageView2/2/w/1000'" mode="scaleToFill" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{ swiperCurrent + 1 }}</text>
				<text class="sign">/</text>
				<text class="num">{{ swiperLength }}</text>
			</view>
		</view>

		<view class="flex  p-xs margin-bottom-sm mb-sm" v-if="aboutUs">
			<view class="flex-sub   padding-sm " v-if="aboutUs.pic_url" style="text-align: center; margin-top: 30upx;    padding-right: 0px;">
				<view class="cu-avatar xxl round " :style="'background-image:url('+aboutUs.pic_url[0]+ '?imageView2/2/w/300); width: 75px;height: 75px;'"></view>
			</view>
			<view class="flex-twice   margin-xs ">
				<view class="padding padding-left-sm" style="padding-bottom: 0px;">
					<text class="text-black text-lg">{{aboutUs.extend.name}}</text>
				</view>
				<view class="padding-left-sm text-sm" style="color: #696464;margin-top: 5px;">{{aboutUs.desc}}</view>
				<view class="padding padding-left-sm">
					<view class='cu-tag bg-black padding' @click="openurl('/pages/post/joinhands')">联系我们</view>
					<!-- <view class='cu-tag bg-white padding' style="    margin-left: 20px;">+关注</view> -->
				</view>

			</view>
		</view>

		<view class="bg-white" style="padding-top: 20px;">
			<view class="text-center padding">
				<view><text class="text-lg">GALLERY</text></view>
				<view><text style="color: #a29c9c;">作品展示</text></view>
			</view>
			<view class="grid col-3 grid-square padding-sm">
				<view class="bg-img" v-for="(item,index) in galleryList" @click="openurl('/pages/gallery/detail?id='+item.id)" :key="index" v-if="item.content_data && item.content_data.photo"
				 :style="[{ backgroundImage:'url(' + item.content_data.photo[0] + '?imageView2/1/w/300/h/300)' }]"></view>
			</view>
			<view class="text-center padding">
				<view @click="openurl('/pages/gallery/index','switchTab')" class='cu-tag bg-white padding' style="border: 1px solid rgb(235, 238, 245);width: 80%;">MORE</view>
			</view>

		</view>

		<view class="bg-white margin-top-sm" style="padding-top: 20px;">
			<view class="text-center padding">
				<view><text class="text-lg">SERIES</text></view>
				<view><text style="color: #a29c9c;">服务套餐</text></view>
			</view>
			<view class=" padding-sm">
				<view class="service" v-for="(item,index) in serviceList" @click="openurl('/pages/service/detail?id='+item.id)"  :key="index">
					<image mode="aspectFit" v-if="item.content_data && item.content_data.photo" :src="item.content_data.photo[0]+'?imageView2/2/w/800'"></image>
					<view class="service-info">
						<view class="service-info-box">
							<view class="service-title">

								{{item.content_data.name}}
							</view>
							<view class="service-price">
								¥{{item.content_data.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text-center padding">
				<view  @click="openurl('/pages/service/index','switchTab')" class='cu-tag bg-white padding' style="border: 1px solid rgb(235, 238, 245);width: 80%;">MORE</view>
			</view>

		</view>
		<view class="bg-white margin-top-sm padding map" @click="openLocation" v-if="latitude&&longitude">
			
			<view class="map-title">
			<text>{{aboutUs.extend.address}}</text>
			<image   src="../../static/001.png"></image>
			</view>
			
			<map  class="margin-top-sm" style="width: 100%; height: 230px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view class="footer padding">
			<view  class="p" @click="copy(aboutUs.extend.weixin)"><text>微信：{{aboutUs.extend.weixin}}</text> <text class="lg  cuIcon-copy margin-left-sm"></text><text class="">复制微信号</text> </view>
			<view class="p" @click="callPhone"><text>电话：<text class="lg  cuIcon-phone "></text>{{aboutUs.extend.phone}}</text>     </view>
			<view class="p"><text>地址：{{aboutUs.extend.address}}</text>  </view>
		</view>
	</view>
</template>

<script>
	import beeApp from '../../beeApp.js';
	export default {
		data() {
			return {

				userInfo: {},
				aboutUs: {
					extend: {

					}
				},
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				galleryList: [],
				serviceList: [],
				latitude:0 ,
				longitude:0,
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '../../static/002.png'
				}]


			};
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
		},
		onLoad() {
			// beeApp.alert("yiqwyei");
			// this.getLeastUrls();

			this.load();

		},
		onPullDownRefresh() {
			this.load();
			uni.stopPullDownRefresh();
		},

		methods: {
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;

			},
			copy(text){
			 	uni.setClipboardData({
			 	    data: text,
			 	    success: function () {
			 	        console.log('success');
			 	    }
			 	});
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.aboutUs.extend.phone
				})
			},
			openurl(url,type){
				if(type=="switchTab"){
					uni.switchTab({
						url:url
					})
				}else{
					uni.navigateTo({
						url:url
					})
				}
				
			},
			load: function() {
				this.getAppIndexAd();
				this.getAboutUs();
				this.getGalleryList();
				this.getServiceList();
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.carouselList,
					current: e.currentTarget.dataset.url
				});
			},
			openLocation(){
				uni.openLocation({
				            latitude: this.latitude,
				            longitude: this.longitude,
				            success: function () {
				                console.log('success');
				            }
				        });
			},
			getServiceList() {
				var that = this;
				beeApp.api(
					'sns/material-list/get', {
						material_type: 'service',
						limit: 9
					},
					function(res) {
						if (res.code != 200) {
							beeApp.alert(res.msg);
							return;
						}
						that.serviceList = res.data.list;

					}
				);
			},
			getGalleryList() {
				var that = this;

				beeApp.api(
					'sns/material-list/get', {
						material_type: 'gallery',
						limit: 9
					},
					function(res) {
						if (res.code != 200) {
							beeApp.alert(res.msg);
							return;
						}
						that.galleryList = res.data.list;

					}
				);
			},
			getAboutUs() {
				var that = this;

				beeApp.api(
					'sns/material/get', {
						type: 'aboutUs',
						limit: 1
					},
					function(res) {
						if (res.code != 200) {
							beeApp.alert(res.msg);
							return;
						}
						var list = res.data.list;
						if (list.length > 0) {
							that.aboutUs = list[0];
							that.latitude=that.aboutUs.extend.latitude ;
							that.longitude=that.aboutUs.extend.longitude ,
							that.covers= [{
								latitude: that.latitude,
								longitude: that.longitude,
								iconPath: '../../static/002.png'
							}];
						}
					}
				);
			},

			getAppIndexAd() {
				var that = this;

				beeApp.api(
					'sns/material/get', {
						type: 'indexPics',
						limit: 1
					},
					function(res) {
						if (res.code != 200) {
							beeApp.alert(res.msg);
							return;
						}
						var list = res.data.list;
						if (list.length > 0 && list[0]['pic_url'].length > 0) {
							that.carouselList = list[0]['pic_url']
							that.swiperLength = list[0]['pic_url'].length;
						}

					}
				);
			},

		}
	};
</script>

<style lang="scss">
	.carousel-section {
		padding: 0;

		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}

		.carousel {
			.carousel-item {
				padding: 0;
			}
		}

		.swiper-dots {
			left: 45upx;
			bottom: 40upx;
		}
	}

	.service {
		image {
			width: 100%;
			height: 300upx;
		}

		height: 300upx;
		position: relative;

		.service-info {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			top: 0px;
			left: 0px;
			position: absolute;

			.service-info-box {
				position: relative;
				top: 38%;

				.service-title {
					text-align: center;
					color: #ffffff;
					font-size: 16px;
				}

				.service-price {
					text-align: center;
					color: #6fd8ad;
					padding: 5px;
				}
			}

		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			// height: 426upx;
			transition: 0.4s;
		}
	}

	.carousel {
		width: 100%;
		height: 420upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			// border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}
	}
	.map{
		
		.map-title{
			position: relative;
			image{
				width: 50upx;
				height: 50upx;
				position: absolute;
				right: 10px;
			}
		}
		
	}
	.footer{
		    background: #444444;
		    width: 100%;
		    min-height: 50px;
			padding-top: 40upx;
			.p{
				margin-bottom: 20upx;
				color: #c9c6c6;
			}
	}
</style>
